<template>
  <view>
    <u-navbar :is-back="false" title="账单"
      title-size="30"
      :background="{background:'#2B88FE' }"
      title-color="#fff">
      <div class="head_icon">
        <u-icon @click="$api.handleBackTo"
          name="arrow-left" color="#fff"
          size="36">
        </u-icon>
        <u-icon @click="$api.handleHomeTo"
          name="home" color="#fff" size="36">
        </u-icon>
      </div>
    </u-navbar>

    <CommDetail :cid="cid" :info="info"
      :current="4">

      <view class="interval u-skeleton-rect">
        对账 <u-button style="margin:20rpx"
          size="mini" type="primary"
          @click="OnClinkT">新增对账记录
        </u-button>
      </view>

      <u-table>
        <u-tr>
          <u-th>金额</u-th>
          <u-th>时间</u-th>
          <u-th>说明</u-th>

        </u-tr>
        <u-tr v-for="(g,index) in list"
          :key="index">
          <u-td> {{g.fMoney}}

          </u-td>

          <u-td>
            {{g.fSumDate}}
          </u-td>
          <u-td>
            <navigator
              :url="`/pages/my_customer/MrkSumMonthDetail?id=${g.fMrkId}&willid=${g.fId}`">
              <div class="yi"> {{g.fInfo}}
              </div>
            </navigator>
          </u-td>
          <u-td>
            {{g.fInfo}}
          </u-td>
        </u-tr>
      </u-table>

      <u-empty text="暂无数据" mode="list"
        v-if="!list.length">
      </u-empty>

    </CommDetail>

  </view>

</template>
<script>
import orlist from '@/components/orlist'
import CommDetail from './commdetail'
export default {
  components: { orlist, CommDetail },
  data() {
    return {
      cid: 0,
      info: {},
      current: 0,
      list: [],
      form: {
        OrderType: 0,
        MrkId: 0,
        Key: '',
        OrderStatus: 0
      }
    }
  },
  methods: {
    getList() {
      this.$axios('api/MrkSumMonth/ListPaged', 'post', { value: this.cid }).then(res => {
        this.list = res.Value.List
      })
    },

    OnClinkT() {
      uni.navigateTo({
        url: `/pages/my_customer/MrkSumMonthAdd?id=${this.cid}`
      })
    }
  },
  onLoad(e) {
    this.cid = Number(e.id)
    this.$axios('api/MrkBasic/GetDetail', 'post', {
      value: e.id
    }).then(res => {
      this.info = res.Value
      this.loading = false
      this.form.MrkId = this.info.fId
      this.getList()
    })
  }
}
</script>

<style lang="scss" scoped>
.interval {
  color: #333;
  font-size: 32upx;
  line-height: 110upx;
  padding: 0 32upx;
}

.listgoods {
  padding: 32upx;
  border-bottom: 1px solid #f8f8f8;
}

.goodsimg {
  width: 144upx;
  height: 144upx;
  display: block;
  margin-right: 24upx;
}

.goodstitel {
  color: #000;
  font-size: 32upx;
}

.rights {
  color: #000;
  font-size: 333;
  font-size: 32upx;
}

.nuber {
  color: #666;
  font-size: 28upx;
  padding-top: 30upx;
}

.time {
  color: #666;
}

.prme {
  color: #000;
  font-size: 32upx;
  font-weight: bold;
}

.cred {
  background-color: #ff0000;
  color: #fef0f0;
}
.bb {
  background-color: #fff;
  color: #000;
}
.viewbbutton {
  position: fixed;
  bottom: 0;
  background: #fff;
  width: 100%;
  .x-row {
    display: flex;
    justify-content: center;
    ::v-deep button {
      margin: 0 20rpx;
    }
  }
}
</style>